.box-one {
  margin:10px 0 20px 0;
  padding:10px;
  border:1px solid rgba(0,0,0,0.2);
  background:#f00;
  color:#fff;
  border-radius:4px;

  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.box-one.ng-hide {
  opacity:0;
  transform: scale(0.8);
}

.box-two { }

.box-two.ng-hide-add {
  -webkit-animation:0.5s hide;
  animation:0.5s hide;
}

@keyframes hide {
  0% {
    opacity:1;
    transform: scale(1);
  }
  30% {
    transform: scale(1.02);
  }
  100% { 
    opacity:0;
    transform: scale(0.5);
  }
}

@-webkit-keyframes hide {
  0% {
    opacity:1;
    transform: scale(1);
  }
  30% {
    transform: scale(1.02);
  }
  100% { 
    opacity:0;
    transform: scale(0.5);
  }
}


.box-two.ng-hide-remove {
  -webkit-animation:0.3s show;
  animation:0.3s show;
}

@keyframes show {
  0% {
    opacity:0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.02);
  }
  100% { 
    opacity:1;
    transform: scale(1);
  }
}

@-webkit-keyframes show {
  0% {
    opacity:0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.02);
  }
  100% { 
    opacity:1;
    transform: scale(1);
  }
}

.item { }

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.item.ng-leave.ng-leave-active,
.item.ng-move,
.item.ng-enter {
  opacity:0;
}

.item.ng-leave,
.item.ng-move.ng-move-active,
.item.ng-enter.ng-enter-active {
  opacity:1;
}

.box {
  background:#333;
  color:#fff;

  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.box.bigger {
  font-size:30px;
}

.box.light-theme {
  background:#eee;
  color:#333;
}





